<template>
  <div class="ChildPage TablePage">
    <vb-table :option="option" ref="table"
              @row-del="rowDel"
              @row-update="rowUpdate"
              @row-save="rowSave"
              @on-load="getList">
      <template #headerSearch-append>
        <el-checkbox size="small" border v-model="showSystem" class="top_search_checkbox">包含系统页面</el-checkbox>
      </template>
      <template #table-name="scope">
        <el-tooltip content="系统页面" v-if="scope.row.isSystem">
          <b class="el-icon-setting prop-icon"></b>
        </el-tooltip>
        {{scope.row.name}}
      </template>
    </vb-table>
    <TablePageDialog ref="tablePageDialog" v-on:reload="$refs.table.reload($refs.table.config.page['current-page'] - 1)"></TablePageDialog>
    <PagePowerKeyDialog ref="pagePowerKeyDialog" v-on:reload="$refs.table.reload($refs.table.config.page['current-page'] - 1)"></PagePowerKeyDialog>
  </div>
</template>

<script>
import TablePageDialog from "../components/dialog/TablePageDialog.vue"
import PagePowerKeyDialog from "../components/dialog/PagePowerKeyDialog.vue"

export default {
  mixins: [],
  components: {
    TablePageDialog,
    PagePowerKeyDialog
  },
  data() {
    let self = this
    return {
      showSystem: false,
      option: {
        selection: false,
        index: true,
        menuWidth: 300,
        column: [
          {
            label: "页面名称",
            prop: "name",
            search: {
              show: true,
              prop: "searchKey",
              hiddenLabel: true,
              placeholder: "\ue605 页面名称/地址"
            },
            sortable: true,
            form: {
              span: 24,
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "类型",
            prop: "type",
            type: "radio",
            width: 150,
            align: "center",
            sortable: true,
            dicData: [
              {
                id: "page",
                label: "动态创建页面"
              },
              {
                id: "custom",
                label: "自定义页面"
              },
              {
                id: "template",
                label: "模板页面"
              }
            ],
            form: {
              span: 24,
              default: "page",
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
              onChange: function (val, item, form) {
                if (val !== 'page') {
                  form.pageStyle = null
                } else if (val !== 'custom') {
                  form.path = null
                }
              }
            },
            search: {
              show: true
            }
          },
          {
            label: "页面地址",
            prop: 'path',
            sortable: true,
            form: {
              vIf: function (row, form) {
                return form.type === 'custom'
              },
              placeholder: "自定义页面地址",
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            }
          },
          {
            label: "页面样式",
            prop: "pageStyle",
            type: "select",
            width: 150,
            align: "center",
            sortable: true,
            dicData: [
              {
                id: "table",
                label: "表格"
              },
              {
                id: "form",
                label: "表单"
              },
              {
                id: "other",
                label: "其他"
              }
            ],
            form: {
              vIf: function (row, form) {
                return form.type === 'page'
              },
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
            search: {
              show: false
            }
          },
          {
            label: "排序",
            prop: 'sort',
            width: 80,
            align: "center",
            sortable: true,
            type: "inputNumber"
          },
          {
            label: "启用",
            prop: 'effect',
            type: "switch",
            width: 80,
            sortable: true,
            align: "center",
            form: {
              default: true
            }
          },
          {
            label: "备注",
            prop: 'remark',
            type: "textarea",
            form: {
              span: 24
            }
          }
        ],
        form: {
          width: 600
        },
        handleBtnList: [
          {
            key: "edit",
            vIf: function (item) {
              return !item.isSystem
            }
          },
          {
            key: "delete",
            vIf: function (item) {
              return !item.isSystem
            }
          },
          {
            label: "设置权限点",
            icon: "el-icon-key",
            type: "text",
            color: "#46a709",
            callback: function (row) {
              self.$refs.pagePowerKeyDialog.open(row)
            },
            vIf: function (item) {
              return !item.isSystem
            }
          },
          {
            label: "页面配置",
            icon: "el-icon-document-remove",
            type: "text",
            color: "#9913b1",
            callback: function (row) {
              self.$refs.tablePageDialog.open(row)
            },
            vIf: function (item) {
              return !item.isSystem
            }
          },
        ],
      }
    }
  },
  computed: {},
  async mounted() {
  },
  methods: {

    /**
     * 查询数据列表信息
     * @param page  页号
     * @param size  每页数量
     * @param search 检索条件
     * @param done
     */
    getList(page, size, search, done) {
      this.callApi("getPageList", Object.assign({
        pageIndex: page,
        pageSize: size,
        showSystem: this.showSystem
      }, search)).then(res => {
        done(res)
      })
    },

    /**
     * 新增数据处理
     * @param form
     * @param done
     */
    rowSave(form, done) {
      this.callApi("addPage", form).then((res) => {
        done(res)
      })
    },

    /**
     * 更新数据处理
     * @param form
     * @param done
     */
    rowUpdate(form, done) {
      this.callApi("updatePage", form).then((res) => {
        done(res)
      })
    },

    /**
     * 删除数据处理
     * @param ids
     * @param done
     */
    rowDel(ids, done) {
      this.callApi("deletePage", {
        ids: ids
      }).then((res) => {
        done(res)
      })
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
  .top_search_checkbox {
    margin-right: 10px;
  }
  .prop-icon {
    margin-right: 1px;
    font-weight: bold;
    color: var(--primary)
  }
</style>
